<template>
  <div>
    <!-- 七天无理由退货 -->
    <Tips></Tips>
    <!-- 商品卡片 -->
    <div>
      <van-checkbox-group
        :disabled="isShow"
        v-model="result"
        v-if="getCartDBList.length > 0"
      >
        <van-checkbox
          class="chx"
          :name="item.id"
          v-for="item in getCartDBList"
          :key="item.id"
        >
          <van-swipe-cell>
            <!-- 商品卡片 -->
            <van-card
              :num="item.num"
              :price="item.price.toFixed(2)"
              :title="item.goodsName"
              :thumb="item.img"
            />
            <!-- 向右滑动删除 -->
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
          <!-- 步进器 -->
          <van-stepper
            min="1"
            max="100"
            v-show="isShow"
            v-model="item.num"
            @change="stepChange(item)"
          />
        </van-checkbox>
      </van-checkbox-group>
    </div>

    <!-- 结算 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="结算"
      class="buttonttt"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkedAll">全选</van-checkbox>
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span
        >件商品，可点击
        <van-button
          type="default"
          size="small"
          round
          @click="editCount"
          class="edittext"
          >{{ isEdit }}</van-button
        >按钮进行商品数量修改
      </template>
    </van-submit-bar>

    <!-- 购物车为空 -->
    <div
      class="empty"
      style="display: none"
      v-show="(this.getCartDBList.length = 0)"
    >
      <img src="~@/assets/custom-empty-image.jpg" alt="" />
      <h3>购物车竟然是空的</h3>
      <p>再忙,也要记得买点什么犒赏自己哟</p>
    </div>
  </div>
</template>

<script>
import Tips from "../../components/Tips";
import { mapState, mapGetters } from "vuex";
import GetCartSum from "@/api";

export default {
  name: "cart2",
  data() {
    return {
      check: false,
      checked: false, //是否被全选
      result: [], //复选框数组
      isEdit: "编辑",
      isShow: false, //步进器的显示
      // 商品总信息
      cartTotal: {
        //  选中商品总金额
        checkedGoodsAmount: 0,
        // 选中商品数量
        checkedGoodsCount: 0,
      },
      cartDB: [],
    };
  },
  mounted() {
    this.$store.dispatch("getCartInfo");
  },
  components: {
    Tips,
  },
  methods: {
    onSubmit() {
      this.$toast("该地区不支持购买");
    },
    //#region
    // 卡片点击事件
    /* cardClick(item) {
      console.log(item);
       this.$toast.setDefaultOptions({ duration: 200 });
       this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
        });*/

    // 计算金额
    /* this.getCartDBList.forEach((it) => {
        if (item.id == it.id) {
          console.log(it.checked);
          if (it.checked) {
            this.cartTotal.checkedGoodsAmount -= it.num * it.price;
          } else {
            this.cartTotal.checkedGoodsAmount += it.num * it.price;
          }
        } 
      }); */
    /*   console.log(this.cartTotal.checkedGoodsCount);
      let bool = !item.checked;
      this.$store.dispatch("alertCartDB", {
        cartId: item.id,
        num: item.num,
        checked: bool,
      });
    }, */ //#endregion
    // 步进器改变
    stepChange(item) {
      this.$store.dispatch("alertCartDB", {
        cartId: item.id,
        num: item.num,
        checked: bool,
      });
      this.$store.dispatch("getCartInfo");
    },
    // 滑动删除
    delCardGoods(cartId) {
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "确定删除此商品吗？？？",
        })
        .then(() => {
          console.log(cartId);
          this.$store.dispatch("delCartDB", cartId);
          console.log("删除成功");
          // on confirm
        })
        .catch(() => {
          // on cancel
          console.log("删除失败");
        });
    },
    // 编辑商品数量
    editCount() {
      this.isShow = !this.isShow;
      if (this.isShow == true) {
        this.isEdit = "完成编辑";
      } else {
        this.isEdit = "编辑";
      }
    },
    /*  checkedAll() {
      this.$store.dispatch("goodsCheckedAll", this.checked);
      this.result = [];
      this.getCartDBList.forEach((element) => {
        if (element.checked) {
          this.result.push(element.id);
        }
      });
      console.log("全选按钮" + this.result);
    }, */
  },
  computed: {
    ...mapState(["cartDB"]),
    ...mapGetters(["getCartDBList"]),
    totalMoney() {},
  },
  created() {
    this.getCartDBList.forEach((item) => {
      console.log("===========", item.checked);
      if (item.checked) {
        this.result.push(item.id);
      }
    });
  },
  watch: {
    // deep:true,
    // checkedNames: function () {
    //   if (this.result.length != this.getCartDBList.length) {
    //     this.checked = false;
    //   } else {
    //     this.checked = true;
    //   }
    // },
    getCartDBList: {
      handler(newValue) {
        if (newValue.length != 0) {
          this.cartDB = newValue;
          console.log("给你值");
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang='less' scoped>
.van-col {
  font-size: 0.13rem;
  height: 0.3rem;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-icon {
    margin-right: 0.04rem;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.buttonttt {
  margin-bottom: 20px;
}
.card {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.cartbox {
  padding-bottom: 148px;
}

.van-submit-bar {
  margin-bottom: 50px;

  .van-submit-bar__tip {
    display: flex;

    align-items: center;
  }
}

.chx {
  padding: 10px 4%;

  background: #fff;

  border-bottom: 1px solid #ccc;

  /deep/.van-checkbox__label {
    flex: 1;
  }
}

.van-card__price {
  color: darkred;
}

.van-stepper {
  text-align: right;
}

.delete-button {
  height: 100%;
}

.custom-image {
  margin-top: 20vh;
}

.empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 300px;
  overflow: hidden;
  text-align: center;
  img {
    width: 90%;
    border-radius: 50%;
  }

  h3 {
    margin: 10px 0;
  }
}

.van-card__title {
  font-size: 0.16rem;
  width: 1.9rem;
  height: 0.2rem;
  line-height: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>